<template>
  <view style="padding: 20rpx;">
    <!-- 当订单列表为空时显示提示信息 -->
    <view v-if="ordersList.length === 0" style="text-align: center; padding: 40rpx; font-size: 32rpx; color: #000000;">
      没有订单
    </view>

    <!-- 当有订单时循环渲染订单项 -->
    <view class="box" v-for="item in ordersList" :key="item.id" style="margin-bottom: 20rpx; padding: 30rpx; background-color: #fff; border-radius: 16rpx; box-shadow: 0 4rpx 16rpx rgba(0,0,0,.05);">
      <!-- 订单基本信息 -->
      <view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx;">
        <view style="font-size: 32rpx; color: #333;">{{ item.businessName }}</view>
        <view style="font-size: 28rpx; color: #333;">实付￥{{ item.actual }}<br><span style="color: #333;">配送费￥1</span></view>
      </view>
      
      <!-- 商品详情 -->
      <view style="font-size: 28rpx; color: #333; margin-bottom: 10rpx;">{{ item.name }}</view>
      
      <!-- 订单详情 -->
      <view style="background-color: #f7f7f7; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx;">
        <view style="color: #000000; margin-top: 10rpx;">订单编号：{{ item.orderNo }}</view>
        <view style="color: #000000; margin-top: 10rpx;">下单时间：{{ item.time }}</view>
        <view style="color: #000000; margin-top: 10rpx;">备注：{{ item.comment }}</view>
      </view>

      <!-- 商家信息 -->
      <view style="background-color: #f7f7f7; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx;">
        <view style="color: #000000; margin-top: 10rpx;">商家地址：{{ item.businessAddress }}</view>
        <view style="color: #000000; margin-top: 10rpx;">商家电话：{{ item.businessPhone }}</view>
      </view>

      <!-- 用户信息 -->
      <view style="background-color: #f7f7f7; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx;">
        <view style="color: #000000; margin-top: 10rpx;">用户地址：{{ item.address }}</view>
        <view style="color: #000000; margin-top: 10rpx;">用户电话：{{ item.phone }}</view>
      </view>

      <!-- 接单按钮 -->
      <button type="primary" size="mini" style="width: 100%; height: 80rpx; line-height: 80rpx; background-color: #ffd100; color: #333; border-radius: 10rpx;" @click="takeOrder(item.id)">接单</button>
    </view>
  </view>
</template>

<script>
	export default {
	  data() {
		return {
		  ordersList: [],
		}
	  },
	  onShow() {
		this.loadAvailableOrders()
	  },
	  methods: {
		loadAvailableOrders() {
		  this.$request.get('/orders/availableForRider').then(res => {
			if (res.code === '200') {
			  this.ordersList = res.data || []
			}
		  })
		},
		takeOrder(orderId) {
		  const form = { id: orderId, riderId: uni.getStorageSync('xm-user').id }
		  this.$request.put('/orders/update', form).then(res => {
			if (res.code === '200') {
			  uni.showToast({
				icon: "success",
				title: '接单成功'
			  })
			  this.loadAvailableOrders()
			} else {
			  uni.showToast({
				icon: "error",
				title: res.msg
			  })
			}
		  })
		}
	  }
	}
</script>

<style scoped>
	.button-hover {
	  background-color: #c6a200 !important;
	}
	.box {
	  transition: all .3s ease-in-out;
	}
	.box:hover {
	  transform: translateY(-10rpx);
	  box-shadow: 0 12rpx 24rpx rgba(0,0,0,.1);
	}
</style>